<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
    <head>
        <title>Utbudstjänts - SOAP test</title>

        <meta charset="utf-8">

        <meta name="description" content="">
        <meta name="author" content="">

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">

        <link rel="stylesheet" href="../css/font-awesome.css">
        <link rel="stylesheet" href="../css/bootstrap.css">
        <link rel="stylesheet" href="../css/prism.css">
        <link rel="stylesheet" href="../css/chosen.min.css">
        <link rel="stylesheet" href="../css/bootstrap-responsive.css">
        <link rel="stylesheet" href="../css/datepicker.css">
        <link rel="stylesheet" href="../css/tablesorter.css">
        <link rel="stylesheet" href="../css/ui-lightness/jquery-ui-1.8.21.custom.css">
        <link rel="stylesheet" href="../css/application-ocean-breeze.css">
        <link rel="stylesheet" href="../css/msgGrowl.css" type="text/css" charset="utf-8" />
        <link rel="stylesheet" href="../css/jquery.msgbox.css">
        <link rel="stylesheet" href="../css/jquery.dataTables.css">
        <script src="../js/lib/modernizr-2.5.3.min.js"></script>
    </head>

    <body>
<body>

<!-- Main list view -->
    <div id="wrapper">
        <div id="topbar">
            <div class="container">
                <a href="javascript:;" id="menu-trigger" class="dropdown-toggle" data-toggle="dropdown" data-target="#">
                    <i class="icon-cog"></i>
                </a>
            </div> <!-- /.container -->
        </div> <!-- /#topbar -->

        <div id="header">
            <div class="container">
                <a href="../index.html" class="brand">Utbudstjänst</a>
            </div> <!-- /.container -->
        </div> <!-- /#header -->

        <div id="masthead">
            <div class="container">
                <div class="masthead-pad">
                    <div class="masthead-text">
                        <h2>Webservice test</h2>
                        <p>Testa SLLs Utbudstjänst</p>
                    </div> <!-- /.masthead-text -->
                </div>
            </div> <!-- /.container -->
        </div> <!-- /#masthead -->        

        <div id="content">
            <div class="container">
                <div class="row">
                    <div class="span12">
                        <div class="">
                            <form class="form-horizontal row">

                                <fieldset class="span6">
                                    <div class="control-group">
                                        <label class="control-label"><strong>Tjänst</strong></label>
                                        <div class="controls">
                                            <div>
                                                <select id="service">
                                                    <option>Välj tjänst</option>
                                                    <option value="GetProductCatalogue">GetProductCatalogue</option>
                                                    <option value="GetCapacities">GetCapacities</option>
                                                    <option value="PullOffers">PullOffers</option>
                                                    <option value="FindOffers">FindOffers</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="control-group">
                                        <label class="control-label"><strong>Katalog</strong></label>
                                        <div class="controls">
                                            <select>
                                                <option value="SLL-SC">SLL</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="control-group">
                                        <label class="control-label"><strong>HSA-ID</strong></label>
                                        <div class="controls">
                                            <div>
                                                <input type="text" placeholder="Ange HSA-ID" class="input-large" value="" id="HSA">
                                            </div>
                                        </div>
                                    </div>
                                    

                                    
                                </fieldset>

                                <fieldset class="span6" id="service-description">
                                    
                                        <h3>Namn på tjänst</h3>
                                        
                                        <p>Beskrivning av vald tjänst</p>
                                        
                                        
                                        <strong>URL</strong>
                                        
                                        <div class="input-append">
                                          <input class="span4" id="service-url" name="service-url" type="text">
                                          <span class="add-on">Testa tjänsten</span>
                                        </div>
                                    
                                </fieldset>
                            </form>
                        </div>

                        <ul class="nav nav-tabs">
                            <li><a data-target="#result" data-toggle="tab">Resultat</a></li>
                            <li><a data-target="#raw" data-toggle="tab">RAW</a></li>
                            <li class="active"><a data-target="#wsdl-tab" data-toggle="tab">WSDL</a></li>
                            <li><a data-target="#soaprequest" data-toggle="tab">SOAP Request</a></li>
                        </ul>

                        <div class="tab-content">
                            <div id="result" class="tab-pane">
                                <label for="response">Svar ifrån tjänsten</label>
                                <textarea rows="8" class="span10 mono" placeholder="Formaterat svar" id="result"></textarea>
                            </div>

                            <div id="wsdl-tab" class="tab-pane active">
                                <label for="response">Tjänstens WSDL</label>
                                <textarea id="wsdl" class="span10 mono" rows="20" placeholder="Tjänstens WSDL visas här"></textarea>
                            </div>

                            <!-- RAW data -->
                            <div id="raw" class="tab-pane">
                                <label for="response">Svar ifrån tjänsten</label>
                                <textarea rows="8" class="span10 mono" placeholder="Oformaterad svar ifrån tjänsten" id="response"></textarea>  
                            </div>

                            <!-- SOAP Request -->
                            <div id="soaprequest" class="tab-pane">
                                <label for="soap-request">SOAP Request</label>
                                <textarea rows="20" class="span10 mono" placeholder="Tjänstens SOAP request" id="soap-request"></textarea>
                            </div>
                            <div id="doc" class="tab-pane"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
        <script src="../js/lib/jquery-1.7.2.min.js"></script>
        <script src="../js/lib/jquery-ui-1.8.21.custom.min.js"></script>
        <script src="../js/lib/jquery.ui.touch-punch.min.js"></script>
        <script src="../js/lib/bootstrap.min.js"></script>
        <script src="../js/lib/moment.min.js"></script>
        <script src="../js/lib/jquery.tablesorter.min.js"></script>
        <script src="../js/lib/jquery.dataTables.js"></script>
        <script src="../js/lib/jquery.validate.js"></script>
        <script src="../js/lib/chosen.jquery.min.js"></script>
        <script src="../js/lib/msgGrowl.min.js"></script>
        <script src="../js/lib/jquery.cookie.js"></script>
        <script src="../js/lib/jquery-handlebars-1.1.4.min.js"></script>
        <script src="../js/md.js"></script>
        <script src="../js/common.js"></script>
<script>

var service, soapMessage;

$('#HSA').on('keyup', function() {
    changeURLParam('HSA')
});

$('#service').on('change', function() {
    getService(this);
});

soapMessage =
    '<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">'+
        '<soap:Body>'+
            '<SomeMethod>'+
                '<Arg1>Arg1 Value</Arg1>'+
                '<Arg2>Arg2 Value</Arg2>'+
            '</SomeMethod>'+
        '</soap:Body>'+
    '</soap:Envelope>';

var soap_service = function() {
    $.ajax({
        url: "http://localhost/someService.svc",
        type: "POST",
        dataType: "xml",
        contentType: "text/xml; charset=\"utf-8\"",
        headers: {
            SOAPAction: "http://localhost/someService/SomeMethod"
        },
        data: soapMessage,
        success: function(soapResponse){
            //DO SOMETHING
        },
        error: function (err) {
            alert("webmethod call failed");
        }
    });
};

var getServiceXML = function(serviceName) {

    $.ajax({
        url: "/wsdl/" +  serviceName + ".wsdl",
        type: "GET",
        dataType: "xml",
        contentType: "text/xml; charset=\"utf-8\"",
        success: function(soapResponse){
            // Get WSDL from response. Skip comment header
            var xmlString = soapResponse.children[0].outerHTML;
            var xmlDoc = $.parseXML(xmlString);
            var $xml = $(xmlDoc);

            service = soapResponse;

            service.baseURL = '../ws/' + serviceName + '/HSA=<HSA-VALUE />';
            service.name = serviceName;
            service.xmlDoc = xmlDoc;
            service.xml = xmlString;
            service.description = $xml.find('documentation:first').text();

            // Extract description
            var serviceDesc = service.description;
            serviceDesc = serviceDesc.substring(serviceDesc.indexOf('Beskrivning: ')+12,serviceDesc.indexOf('Revisioner: '));

            // Insert data into form
            $('#service-description h3').html(service.name);
            $('#wsdl').text(xmlString);
            $('#service-description p').text(serviceDesc);
            $('#service-url').val(service.baseURL);
        },
        error: function (err) {
            alert("webmethod call failed");
        }
    });
};

function changeURLParam(inputId) {
    var inputVal = $('#' + inputId).val();
    var newURL = service.baseURL.replace('<' + inputId + '-VALUE />', inputVal)
    $('#service-url').val(newURL);
}

function getSOAPRequest(key) {
    $.ajax({
        url: "/data/ws/service-requests.xml",
        type: "GET",
        dataType: "xml",
        contentType: "text/xml; charset=\"utf-8\"",
        success: function(soapResponse) {
            var xmlString = soapResponse.children[0].outerHTML;

            // Loop and find correct envelope
            var envelopes = soapResponse.children[0].children;

            for (var i=0;i<envelopes.length;i++) {
                if (envelopes[i].outerHTML.indexOf(key)>-1) {
                    xmlString = envelopes[i].outerHTML;
                }
            }

            $('#soap-request').text(xmlString);
        },
        error: function (err) {
            alert("webmethod call failed");
        }
    });
}

function getService(THIS) {
    // Retrieve WSDL for the selected service
    var currentService = $('option:selected', THIS).html();
    getServiceXML(currentService);

    // Show/Hide input fields depending on parameters
    // Get SOAP Request
    getSOAPRequest(THIS.value);
}

</script>
</html>
